<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html,body{margin: 0;padding:0;}
    .cont{width: 1000px;overflow: hidden;}
    .cont .box{float: left;border: solid 1px black;width: 250px;box-sizing: border-box;text-align: center;}
    .cont .box img{width: 70%;height:150px}
    .cont .box p{line-height: 20px;height:40px;overflow: hidden;}

    .detailBox img{width:300px;height:300px}
    .detailBox .imgbox{float: left;width:300px;}
    .detailBox .detail{float: left;width:400px;}
  </style>
</head>
<body>
  <div class="cont"></div>
  <div class="detailBox"></div>
</body>
<script>

  class Detail{
    constructor(){
      this.cont = document.querySelector(".cont");
      this.detail = document.querySelector(".detailBox");
      this.url = "http://10.11.50.46:3000/getgoods";

      this.getData();
    }
    getData(){
      ajax(this.url).then(res=>{
        res = JSON.parse(res).data;
        this.arr = [];
        for(let i=0;i<4;i++){
          this.arr.push(res[random(0, res.length-1)])
        }
        this.renderList();
      })
    }
    renderList(){
      let str = "";
      this.arr.forEach(val=>{
        str += `<div class="box">
                  <span class="goodsBox" data-id="${val.goodsId}">
                    <img src="${val.goodsImg}" alt="">
                    <p>${val.goodsName}</p>
                    <p>${val.price}</p>
                  </span>
                  <input type="button" value="加购物车" data-id="${val.goodsId}">
                </div>`;
      })
      this.cont.innerHTML = str;

      this.goodsBox = this.cont.querySelectorAll(".goodsBox");

      this.addEvent();
    }
    addEvent(){
      const that = this;
      this.goodsBox.forEach(val=>{
        val.onclick = function(){
          that.getOneData(this.dataset.id);
        }
      })
    }
    getOneData(id){
      ajax(this.url, {
        id
      }).then((res)=>{
        this.goodsObj = JSON.parse(res).data[0];
        this.renderDetail()
      })
    }
    renderDetail(){
      let str = `<div class="imgbox">
                <img src="${this.goodsObj.goodsImg}" alt="">
              </div>
              <div class="detail">
                <h3>名称：${this.goodsObj.goodsName}</h3>
                <p>详细描述：${this.goodsObj.message}</p>
                <p>价格：${this.goodsObj.price}</p>
                <p>品牌：${this.goodsObj.brand}</p>
                <p>分类：${this.goodsObj.kind}</p>
              </div>;`
      this.detail.innerHTML = str
    }
  }

  new Detail();


  function ajax(url, data={}){
    let str = "";
    for(let i in data){
      str += `${i}=${data[i]}&`
    }
    url += "?" + str.slice(0,-1);

    const xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.send();
    return new Promise((resolve, reject)=>{
      xhr.onload = function(){
        if(xhr.status === 200){
          resolve(xhr.responseText);
        }else{
          reject(xhr.status);
        }
      }
    })
  }


  function random(a,b){
    return Math.round(Math.random()*(a-b)+b)
  }
</script>
</html>